<script setup lang="ts">
import { onMounted, ref } from 'vue'
import BangumiCard from '@/components/homepage/AnimeCard.vue'
import AddBangumiCard from '@/components/homepage/AddAnimeCard.vue'
import { getAnimeListRequest } from '@/api/anime.ts'

const justifyContent = ref('left')

onMounted(() => {
  const handleResize = () => {
    const vSheet = document.getElementById('HomeSheet')
    if (vSheet && vSheet.children.length > 0) {
      const gridTemplateColumns = window
        .getComputedStyle(vSheet)
        .getPropertyValue('grid-template-columns')
      const columnCount = gridTemplateColumns.split(' ').length
      if (columnCount >= vSheet.children.length) {
        justifyContent.value = 'left'
      } else {
        justifyContent.value = 'center'
      }
    }
  }

  let resizeTimer
  window.addEventListener('resize', () => {
    clearTimeout(resizeTimer)
    resizeTimer = setTimeout(() => {
      handleResize()
    }, 200)
  })
  handleResize()
  initBangumiList()
})

interface BangumiItem {
  id: number
  poster: string
  title: string
  subTitle: string
}
const animaList = ref<BangumiItem[]>([])
function initBangumiList() {
  getAnimeListRequest().then((res) => {
    animaList.value = res.data
  })
}
</script>
<template>
  <v-sheet
    rounded
    id="HomeSheet"
    width="100%"
    height="100%"
    elevation="8"
    :style="{
      justifyContent: justifyContent,
    }"
  >
    <AddBangumiCard></AddBangumiCard>
    <BangumiCard
      v-for="item in animaList"
      :key="item.id"
      :poster="item.poster"
      :title="item.title"
      :subtitle="item.subTitle"
      :id="item.id.toString()"
    ></BangumiCard>
  </v-sheet>
</template>

<style lang="css" scoped>
.v-application .v-sheet {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(auto-fill, 240px);
  flex-wrap: wrap;
  overflow: auto;
  justify-content: left;
  align-content: start;
}
.application .v-card {
  background-color: white;
  margin: 40px;
}
</style>
